เรื่องของกลางจอ เนี่ย จะดูว่าง่ายก็ง่าย จะยากก็ยากนะครับ เนื่องจากในบางครั้งเราอาจพบว่าบราวเซอร์แต่ละยี่ห้อแสดงผลไม่เหมือนกัน ซึ่งในความเป็นจริงแล้ว การวางอะไรไว้ตตรงกลางนั้น มีเคล็ดลับอยู่เล็กน้อยเท่านั้นครับ

ลองมาดูแบบแรกกัน

<div style="text-align: center;">Center</div>

 

<div style="text-align: center;">Center</div>

สังเกตุโค้ดนะครับ ผมกำหนด text-align:center ให้กับทั้ง 2 div แต่อันบนไม่อยู่ตรงกลาง แต่อันล่างอยู่ตรงกลาง

<div style="border: 1px solid red; display: table; text-align: center;">Center</div>

 

<div style="border: 1px solid green; display: block; text-align: center;">Center</div>

ผมลองใส่กรอบให้ดูเพื่อให้เห็นผลชัดเจนขึ้นว่าเกิดอะไรขึ้น

ปัญหามันอยู่ที่กรอบครับ ถ้า display ถูกกำหนดเป็น table นั่นหมายความว่า div จะมีขนาดตามสิ่งที่อยู่ภายใน ดังนั้น ข้อความและกรอบจึงมีขนาดพอดีกันและไม่สามารถอยู่กลางจอได้

ในกรณีที่ 2 กำหนดให้ display เป็น block นั่นหมายความว่า div จะมีขนาดเต็มพื้นที่ (ความกว้าง) ของกรอบภายนอก ดังนั้นข้อความภายใน ย่อมสามารถจัดให้อยู่กลาง div ได้

ในกรณีด้านบนเราสามารถสรุปอีกลักษณะหนึ่งได้ว่า สิ่งที่อยู่ใน div จะอยู่ตรงกลางได้ก็ต่อเมื่อมันมีขนาดกว้างกว่าสิ่งที่อยู่ภายในครับ